<template>
    <div id="line-chart-main"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "LineChart",
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line-chart-main'));
            // 绘制图表
            myChart.setOption({
                grid: {
                    left: '5%',
                    right: '10%',
                    top:'20%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip : {
                    show: true,
                    trigger: 'item'
                },
                legend: {
                    show:true,
                    x:'center',
                    y:'10',
                    textStyle:{
                        color:'#bbdaff'
                    },
                    data:['1区','2区','3区','4区','5区']
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        axisLabel:{
                            color: '#bbdaff'
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#376fce'
                            }
                        },
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:'#376fce'
                            }
                        },
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}',
                            textStyle:{
                                color:'#bbdaff'
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#bbdaff'
                            }
                        },
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:'#376fce'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'1区',
                        type:'line',
                        symbol:'circle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color:'#14e1ea',
                                lineStyle: {
                                    color: "#14e1ea",
                                    width:1
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(20,225,234,0.3)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(20,225,234,0.9)'
                                    }]),
                                }
                            }
                        },
                        markPoint:{
                            itemStyle:{
                                normal:{
                                    color:'red'
                                }
                            }
                        },
                        data:[1120, 1132, 2101, 3134, 2490, 1230, 1210]
                    },
                    {
                        name:'2区',
                        type:'line',
                        symbol:'circle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color:'#b29aff',
                                lineStyle: {
                                    color: "#b29aff",
                                    width:1
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(178,154,255,0.3)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(178,154,255,0.9)'
                                    }]),
                                }
                            }
                        },
                        data:[2520, 168, 1591, 264, 269, 3360, 360]
                    },
                    {
                      name:'3区',
                      type:'line',
                      symbol:'circle',
                      symbolSize: 8,
                      itemStyle: {
                        normal: {
                          color:'#1494ff',
                          lineStyle: {
                            color: "#1494ff",
                            width:1
                          },
                          areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                              offset: 0,
                              color: 'rgba(20,148,255,0.3)'
                            }, {
                              offset: 1,
                              color: 'rgba(20,148,255,0.9)'
                            }]),
                          }
                        }
                      },
                      data:[2520, 1682, 1591, 2634, 2690, 3360, 3160]
                    },
                  {
                    name:'4区',
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    itemStyle: {
                      normal: {
                        color:'#faa52b',
                        lineStyle: {
                          color: "#faa52b",
                          width:1
                        },
                        areaStyle: {
                          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: 'rgba(250,165,43,0.3)'
                          }, {
                            offset: 1,
                            color: 'rgba(250,165,43,0.9)'
                          }]),
                        }
                      }
                    },
                    data:[252, 168, 191, 264, 290, 60, 310]
                  },
                  {
                    name:'5区',
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    itemStyle: {
                      normal: {
                        color:'#55cf83',
                        lineStyle: {
                          color: "#55cf83",
                          width:1
                        },
                        areaStyle: {
                          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: 'rgba(85,207,131,0.3)'
                          }, {
                            offset: 1,
                            color: 'rgba(85,207,131,0.9)'
                          }]),
                        }
                      }
                    },
                    data:[1520, 1382, 1291, 634, 2190, 360, 369]
                  }
                ]
            })
        }
    }
</script>

<style scoped>

</style>
